<template>
  <!-- 这里的input事件是原生input事件  一旦表单改动 就会触发原生input事件 调用当前组件实例的自定义事件input -->
  <!-- 
    原生事件指令的插值中都会存在一个$event代表事件对象
    自定义事件指令的插值中都会存在一个$event 代表自定义事件的传值
   -->
  <input
    type="text"
    class="myInput"
    :value="value"
    @input="$emit('input', $event.target.value)"
  />
</template>

<script>
export default {
  name: "MyInput",
  props: ["value"],
};
</script>

<style scoped>
.myInput {
  width: 100%;
  height: 40px;
  border: 1px solid #000;
  font-size: 30px;
}
.myInput:focus {
  outline: 5px solid cyan;
}
</style>